<script>
_h=h= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var sWidth = parseInt((window.innerWidth > 0) ? window.innerWidth : screen.width);
if(sWidth>750){sWidth=750;}
var _rate=(sWidth/750);
if(h<_rate*1206){
	h=_rate*1206;
}

 
document.body.addEventListener('touchmove', function(e) {e.preventDefault();}, { passive: false });
var touchStartEle=document.getElementById("p3-press");
touchStartEle.addEventListener('touchmove', function(e) {e.preventDefault();}, { passive: false });
$('html,body').css({overflow:'hidden',height:'100%',position:'fixed',left:0,top:0});
$(function(){
  
	$('.container').width(sWidth).height(h);
	$('.p-b, .thebg').width(sWidth).height(_rate*1206);
	 
    $('.p1-logo, .p2-t1').width(_rate*192).height(_rate*81);
    $('.p1-logo').css({"top":_rate*30, "left":0});
    $('.p1-t1').css({"top":_rate*104});
    $('.p1-p2').height(_rate*1077).css({"top":_rate*124});
    $('.p1-p1').width(_rate*424).height(_rate*440).css({"top":_rate*520, "left":_rate*322});
    $('.p1-s').width(_rate*180).height(_rate*134).css({"top":_rate*702, "left":_rate*142});
    $('.p1-btn').width(_rate*529).height(_rate*185).css({"bottom":'6.5%', "left":_rate*110});
     
    $('.p2-t1').css({"top":_rate*20});
  
    $('.p2-next').width(_rate*401).height(_rate*131).css({"top":_rate*56, "left":_rate*175});
    $('.p2-shou').width(_rate*144).height(_rate*100).css({"top":_rate*84, "left":_rate*146});

    
 
    $('.p2-t2').css({"top":_rate*1054});
    $('.p2-z1').css({"top":_rate*166});
    _tmpH=_rate*1006;
    $(".pop-t1").height(_tmpH).css({"top":(h-_tmpH)/2});
    $('.p2-choose').css({"top":_rate*183});
    $('.swiper-pagination').css({"top":_rate*740, "left":_rate*108});
    $('.p2-t3').width(_rate*510).height(_rate*75).css({"top":_rate*773, "left":_rate*96});
    $('.p2-t4').width(_rate*584).height(_rate*264).css({"top":_rate*466, "left":_rate*2});
    
    $('.p2-1, .p2-2, .p2-3').width(_rate*78).height(_rate*104);
    $('.p2-1').css({"top":_rate*681, "left":_rate*408});
    $('.p2-2').css({"top":_rate*681, "left":_rate*487});
    $('.p2-3').css({"top":_rate*681, "left":_rate*567});

    $('.p2-snai').width(_rate*200).height(_rate*210).css({"top":_rate*410, "left":_rate*360});
   
    $('.p3-logo').width(_rate*182).height(_rate*78).css({"top":0, "left":0});
    $('.p3-back').width(_rate*138).height(_rate*144).css({"top":0, "right":0});
    $('.p3-ant1').width(_rate*177).height(_rate*150).css({"top":_rate*128, "left":_rate*78});
     
     
    $('.p3-t3').css({"top":_rate*42});
    $('.p3-1').css({"top":_rate*102});
    $('.p3-t1').css({"top":_rate*624});
    $('.p3-t2').css({"top":_rate*1040});
    if(h > _rate*1206){
       var _cha= (h - _rate*1206)/2;
       if(_cha > 0){
          $('.thebg, .theb2').css({"top":_cha});
       }
      
       $(".p1-bg").attr("src","<?php echo $cdnUrl ?>img/p1-x.jpg");
       $(".p2-bg").attr("src","<?php echo $cdnUrl ?>img/p2-x.jpg");
       
       $('.p2-next').css({"top":_rate*48});
       $('.p2-shou').css({"top":_rate*76});
       $('.p3-t3').css({"top":_rate*32});
      
    }
 
    $(".p1").fadeIn();
    $(".p3-back").click(function(){
         $(".p3").css({"z-index":1});
         $(".p2-1, .p2-2, .p2-3, .p2-next, .p2-shou, .p2-t2").show();
         $(".p3").fadeOut();
         $(".p2").fadeIn();
         _hmt.push(['_trackEvent', 'p3back', 'click', '返回']); 
    });
    
    window.setTimeout(function(){
         $(".p1-p1").removeClass("animated fadeInUp d3s");
         $(".p1-s").removeClass("  animated fadeIn d1s");
         $(".p1-p1").addClass("ani15 pulse infinite");
         window.setTimeout(function(){
         $(".p1-s").addClass("p1-s-move");
         }, 600);
         
    }, 1500); 
    $(".p3-press").on("touchstart", function(e) {
         _hmt.push(['_trackEvent', 'p3press', 'touch', '长按']); 
    });

    window.setTimeout(function(){
	       $(".p2").hide().css({"opacity":1});
         $(".p2-t1").addClass(" animated fadeInDown d5s");
         $(".p2-next").addClass("animated fadeIn d5s");
         $(".p2-shou").addClass("ani15 infinite flash d5s");
       
         $(".p2-choose, .p2-z1").addClass(" animated flipInY");
         $(".p2-t2").addClass(" animated fadeInUp d5s");
          
          
           
    }, 400);

    wx.config({
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'showMenuItems', 'hideMenuItems']
    });
    var _title='明治早餐新搭档，你吃过吗？';
    var _desc='明治朝食果蔬风味酸乳，给你带来味蕾新体验，快来打卡啦！';
    var _link='http://mei94.com/meiji/';
    var _imgUrl='http://mei94.com/meiji/img/64.jpg';
      wx.ready(function () {
        wx.updateAppMessageShareData({
            title: _title, 
            desc: _desc, 
            link: _link, 
            imgUrl: _imgUrl,success: function () {}
          });
         wx.updateTimelineShareData({
                title: _desc, 
                link: _link, 
                imgUrl: _imgUrl, success: function () {}});
      });

    $('.p2-s1').width(_rate*583).height(_rate*723);
    var _swiper = new Swiper('.p2-s1', {
		   initialSlide:0,
		    pagination: {
		      el: '.swiper-pagination',
		    },
		   speed:260,
		   observer:true,
           observeParents:true,
		   touchAngle:360,
		   on: {
		    init: function(swiper){
           window.setTimeout(function(){
              $('.swiper-pagination-bullet').width(_rate*45).height(_rate*33);
            }, 400); 
		    },
        slideChangeTransitionEnd: function(){
           console.log(this.activeIndex);
           $(".p3-1").attr("src","<?php echo $cdnUrl ?>img/p3-"+(this.activeIndex+1)+".png");
           _hmt.push(['_trackEvent', 'p2slide', 'slide', '左右滑动id:'+this.activeIndex]);
         }  
		   } 
 
		    });

   

      $('.p2-1').click(function(){
      	 $(".p2-1").attr("src","<?php echo $cdnUrl ?>img/p2-1.png");
      	 $(".p2-2").attr("src","<?php echo $cdnUrl ?>img/p2-2b.png");
      	 $(".p2-3").attr("src","<?php echo $cdnUrl ?>img/p2-3b.png");
      	 $(".p2-t4").attr("src","<?php echo $cdnUrl ?>img/p2-t4.png");
         $(".p2-end").attr("src","<?php echo $cdnUrl ?>img/p2-f1.png");
         $(".p3-t1").attr("src","<?php echo $cdnUrl ?>img/p3-t1-1.png");

         _hmt.push(['_trackEvent', 'p2guo', 'click', '热情红果']); 
      	 
      });
      $('.p2-2').click(function(){
      	 $(".p2-1").attr("src","<?php echo $cdnUrl ?>img/p2-1b.png");
      	 $(".p2-2").attr("src","<?php echo $cdnUrl ?>img/p2-2.png");
      	 $(".p2-3").attr("src","<?php echo $cdnUrl ?>img/p2-3b.png");
      	 $(".p2-t4").attr("src","<?php echo $cdnUrl ?>img/p2-t4-2.png");
         $(".p2-end").attr("src","<?php echo $cdnUrl ?>img/p2-f2.png");
         $(".p3-t1").attr("src","<?php echo $cdnUrl ?>img/p3-t1-2.png");
         _hmt.push(['_trackEvent', 'p2guo', 'click', '优雅紫果']); 
      });
      $('.p2-3').click(function(){
      	 $(".p2-1").attr("src","<?php echo $cdnUrl ?>img/p2-1b.png");
      	 $(".p2-2").attr("src","<?php echo $cdnUrl ?>img/p2-2b.png");
      	 $(".p2-3").attr("src","<?php echo $cdnUrl ?>img/p2-3.png");
      	 $(".p2-t4").attr("src","<?php echo $cdnUrl ?>img/p2-t4-3.png");
         $(".p2-end").attr("src","<?php echo $cdnUrl ?>img/p2-f3.png");
         $(".p3-t1").attr("src","<?php echo $cdnUrl ?>img/p3-t1-3.png");
         _hmt.push(['_trackEvent', 'p2guo', 'click', '清香绿果']); 
      });
      $('.p2-snai, .p2-next').click(function(){
          $(".p3-1").attr("src","<?php echo $cdnUrl ?>img/p3-"+(_swiper.activeIndex+1)+".png");
          $(".p3").css({"z-index":3});
          $(".p2-1, .p2-2, .p2-3, .p2-next, .p2-shou, .p2-t2").hide();
      	  $(".p2").hide();
          $(".weui-toast").show();
          $(".p3").show();  
          window.setTimeout(function(){
                 new html2canvas(document.getElementById('p3box'),{background:'',width:$('#p3box').width(),height:$('#p3box').height()}).then(canvas => {
                    $(".p3-press").attr("src" , canvas.toDataURL("image/png",1.0));
                    window.setTimeout(function(){
                      $(".weui-toast").hide();
                    }, 200);
                  });
                }, 300);
          _hmt.push(['_trackEvent', 'p2hecheng', 'click', '点击合成照片']);
      });

      $('.p1-btn').click(function(){
         $('.swiper-pagination-bullet').width(_rate*45).height(_rate*33);
         $(".p1").fadeOut();
         $(".p2").fadeIn();
         _hmt.push(['_trackEvent', 'p1next', 'click', 'diy我的早餐']);
      });
      $('.p1-p1').click(function(){
         $(".pop").fadeIn();
         _hmt.push(['_trackEvent', 'productdesc', 'click', '产品说明']);
      });
      $('.pop').click(function(){
         $(".pop").fadeOut();
         _hmt.push(['_trackEvent', 'pdescclose', 'click', '关闭产品说明']);
      });
      
      function getOnNum(){
          $.post("api/?c=getline", {id:'isonline'}, function(data){
               $(".p1-txt").html('当前参与人数： '+data.n);
          }, "json");
         window.setTimeout(function(){
             getOnNum();
         }, 1500);
      }
       
      
});
</script>